import React from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Form, Input ,Button} from 'antd-mobile'
import { getRegApi } from '../../api/qqApi'
function Index() {
  const nav=useNavigate()
  const [form]=Form.useForm()
  const onFinish = async (values) => {
    const data=await form.validateFields(values)
    console.log(data);
    const {data:res}= await getRegApi(values)
    console.log(res);
    
  }

  
  return (
    <div>
      <NavBar onBack={()=>nav(-1)}></NavBar>

      <div>
        <h1 style={{textAlign:'center',marginTop:'50px'}}>注册账户</h1>

        <Form
        form={form}
        name='form'
        onFinish={onFinish}
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
           <Form.Item 
           label='用户名'
           name='username'
           rules={[
            { required: true,message:'请输入用户名' },
          ]}
           >
          <Input placeholder='请输入用户名' />
        </Form.Item>
         <Form.Item
        name='email'
        label='邮箱'
        rules={[
          { required: true },
          { type: 'string', min: 6 },
          { type: 'email', warningOnly: true },
        ]}
      >
        <Input placeholder='请输入邮箱' />
      </Form.Item>
      <Form.Item 
           label='电话'
           name='tel'
           rules={[
            { required: true,message:'请输入手机号' },
            {
              pattern: /^1[3-9]\d{9}$/,
              message:'请输入正确的手机号'
            }
          ]}
           >
          <Input placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item 
           label='出生日期'
           name='birth'
           rules={[
            { required: true,message:'请输入出生日期' }
          ]}
           >
          <Input placeholder='请输入出生日期' />
        </Form.Item>
        <Form.Item 
           label='密码'
           name='password'
           rules={[
            { required: true,message:'请输入密码' }
          ]}
           >
          <Input placeholder='请输入密码' />
        </Form.Item>
        
      </Form>
      </div>
    </div>
  )
}

export default Index
